import React, { useCallback, useState } from 'react';
import { Link, Outlet, useNavigate } from 'react-router-dom';
import { ProfileIcon } from 'assets';
import { useSearchPageLocationInit } from 'hooks';
import { observer } from 'mobx-react-lite';
import RootStore from 'store/RootStore';

import Button from 'components/Button';
import { GithubIcon } from 'components/icons';
import { PageLoader } from 'components/Loader/PageLoader';
import Text, { TEXT_VIEW, TEXT_WEIGHT } from 'components/Text';
import { classnames, logout } from 'utils';

import classes from './Layout.module.scss';

const cnLayout = classnames(classes, 'layout');

const Layout: React.FC = () => {
    useSearchPageLocationInit();
    const navigate = useNavigate();

    const [visible, setVisible] = useState(false);

    const githubAuth = useCallback(() => {
        window.location.assign(
            `https://github.com/login/oauth/authorize?client_id=${process.env.CLIENT_ID as string}&redirect_uri=${
                window.location.href
            }&scope=${['repo', 'user', 'delete_repo'].join(',')}`,
        );
    }, []);

    const logoutHandle = useCallback(() => {
        logout();
        navigate('/');
        RootStore.githubOAuth.setAccessToken(null);
    }, []);

    const visibleHandle = useCallback((vis: boolean) => () => setVisible(vis), []);
    const visibleReverse = useCallback(() => setVisible((prev) => !prev), []);
    return (
        <div className={cnLayout()}>
            <header className={cnLayout('header')}>
                <Link to="/" className={cnLayout('header-left')}>
                    <GithubIcon width={32} height={32} />
                    <Text view={TEXT_VIEW.p20} weight={TEXT_WEIGHT.bold}>
                        GitHub Client
                    </Text>
                </Link>
                {RootStore.githubOAuth.isLogin ? (
                    <div onMouseLeave={visibleHandle(false)} style={{ position: 'relative' }}>
                        <img
                            onMouseOver={visibleHandle(true)}
                            onTouchStart={visibleReverse}
                            src={RootStore.githubOAuth.userOwnProfile?.avatarUrl ?? ProfileIcon}
                            alt="profile icon"
                            className={cnLayout('header-right')}
                        />
                        <div className={cnLayout('popover', { visible })} onClick={visibleHandle(false)}>
                            <div onClick={logoutHandle} className={cnLayout('item')}>
                                <Text view={TEXT_VIEW.p18}>Logout</Text>
                            </div>
                            <Link className={cnLayout('item')} to={`/user`}>
                                <Text view={TEXT_VIEW.p18}>Profile</Text>
                            </Link>
                        </div>
                    </div>
                ) : (
                    <Button onClick={githubAuth} className={cnLayout('button')}>
                        Login
                    </Button>
                )}
            </header>
            <PageLoader />
            <div className={cnLayout('outlet')}>
                <Outlet />
            </div>
        </div>
    );
};

export default observer(Layout);
